<template>
    <el-dialog draggable v-bind="{ ...options }" :model-value="isShow" :width="width" :fullscreen="isFullscreen"
        @opened="opened" @closed="closed" @close="close" @open="open" :show-close="false">
        <template #header>
            <div class="title-box" @dblclick="openFullscreen">
                <slot name="title"></slot>
                <span class="title" v-if="!$slots.title">{{ title }}</span>
                <div class="right-box">
                    <div v-if="showFullscreen">
                        <el-icon size="18" class="el-icon" v-if="!isFullscreen" @click="openFullscreen">
                            <FullScreen />
                        </el-icon>
                        <div class="close-fullscreen" v-else @click="openFullscreen">
                            <svg t="1687859073485" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2283" width="200" height="200">
                                <path
                                    d="M301.61271492 7.07051506c-25.24647427 0-42.07745737 16.83098314-42.07745737 42.07745742v189.34855691c0 12.62323709-8.41549115 21.03872822-21.03872816 21.03872816H49.14797248c-25.24647427 0-42.07745737 16.83098314-42.07745742 42.07745737s16.83098314 42.07745737 42.07745742 42.07745647h189.34855691C297.40496887 343.69017139 343.69017139 297.40496887 343.69017139 238.49652939V49.14797248c0-25.24647427-16.83098314-42.07745737-42.07745647-42.07745742zM785.50347061 343.69017139H974.85202752c25.24647427 0 42.07745737-16.83098314 42.07745742-42.07745647s-16.83098314-42.07745737-42.07745742-42.07745737h-189.34855691c-12.62323709 0-21.03872822-8.41549115-21.03872816-21.03872816V49.14797248c0-25.24647427-16.83098314-42.07745737-42.07745737-42.07745742s-42.07745737 16.83098314-42.07745647 42.07745742v189.34855691C680.30982861 297.40496887 726.59503113 343.69017139 785.50347061 343.69017139zM238.49652939 680.30982861H49.14797248c-25.24647427 0-42.07745737 16.83098314-42.07745742 42.07745647s16.83098314 42.07745737 42.07745742 42.07745737h189.34855691c12.62323709 0 21.03872822 8.41549115 21.03872816 21.03872816V974.85202752c0 25.24647427 16.83098314 42.07745737 42.07745737 42.07745742s42.07745737-16.83098314 42.07745647-42.07745742v-189.34855691C343.69017139 726.59503113 297.40496887 680.30982861 238.49652939 680.30982861zM974.85202752 680.30982861h-189.34855691c-58.90843962 0-105.193643 46.28520248-105.193642 105.193642V974.85202752c0 25.24647427 16.83098314 42.07745737 42.07745647 42.07745742s42.07745737-16.83098314 42.07745737-42.07745742v-189.34855691c0-12.62323709 8.41549115-21.03872822 21.03872816-21.03872816H974.85202752c25.24647427 0 42.07745737-16.83098314 42.07745742-42.07745737s-16.83098314-42.07745737-42.07745742-42.07745647z"
                                    p-id="2284" fill="#333"></path>
                            </svg>
                        </div>
                    </div>
                    <el-icon size="18" class="close-icon el-icon"  @click="close">
                        <Close />
                    </el-icon>
                </div>
            </div>
        </template>
        <slot></slot>
        <template #footer v-if="$slots.footer">
            <slot name="footer"></slot>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
/**
 * 自定义组件弹窗 可以拖动 可以控制大小
 * @props {string} title 弹窗标题
 * @props {boolean} isShow 是否显示弹窗
 * @props {string} width 弹窗宽度
 * @props {object} options 弹窗配置
 * @props {boolean} fullscreen 是否全屏
 * @props {boolean} showFullscreen 是否显示全屏按钮
 *
 * @method close 关闭弹窗
 * @method open 打开弹窗
 * @method opened 打开弹窗后
 * @method closed 关闭弹窗后
 *
 */
import { ref, watch } from "vue";
import { FullScreen, Close } from "@element-plus/icons-vue";
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: "Tips"
    },
    width: {
        type: String,
        default: "50%"
    },
    options: {
        type: Object,
        default: () => ({})
    },
    fullscreen: {
        type: Boolean,
        default: false
    },
    showFullscreen: {
        type: Boolean,
        default: true
    }
})

const isFullscreen = ref(false);

watch(() => props.fullscreen, (newValue) => {
    isFullscreen.value = newValue
}, {
    immediate: true,
})

const emit = defineEmits(["update:isShow", "opened", "closed", "open", "close"])

const close = () => {
    emit("update:isShow", false);
    emit("close");
}
const open = () => {
    emit("open");
}
const openFullscreen = () => {
    isFullscreen.value = !isFullscreen.value;
}
const opened = () => {
    emit("opened")
}
const closed = () => {
    emit("closed")
}

</script>
<style lang="scss" scoped>
.title-box {
    display: flex;
    justify-content: space-between;
    .right-box{
        display: flex;
    }
    .close-icon{
        margin-left: 10px;
        
    }
    .el-icon{
        cursor: pointer;
    }
    .icon {
        font-size: 20px;
        cursor: pointer;
    }

    .title {
        font-size: 18px;
    }

    .close-fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        cursor: pointer;

        svg {
            width: 18px;
            height: 18px;
        }
    }
}
</style>